<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'

  const props = defineProps({
    videoList: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
    initialIndex: {
      type: Number,
      default: () => 0,
    },
  })

  const emits = defineEmits<{
    (e: 'close'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 当前正在预览的视频的索引
  const currentPreviewIndex = ref(props.initialIndex)

  /**
   * 取消事件
   */
  const onCancel = () => {
    visible.value = false
    emits('close')
  }

  /**
   * 预览上一个
   */
  const onPreClick = () => {
    currentPreviewIndex.value -= 1
    if (currentPreviewIndex.value < 0) {
      currentPreviewIndex.value = props.videoList.length - 1
    }
  }

  /**
   * 预览下一个
   */
  const onNextClick = () => {
    currentPreviewIndex.value += 1
    if (currentPreviewIndex.value > props.videoList.length - 1) {
      currentPreviewIndex.value = 0
    }
  }

  watch(
    () => props.initialIndex,
    (value) => {
      currentPreviewIndex.value = value
    },
    { immediate: true },
  )
</script>

<template>
  <h-dialog v-model="visible" title="视频预览" :width="800" @close="onCancel">
    <div class="vide-preview-wrapper">
      <div class="pre-btn" @click="onPreClick">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <video width="600" controls :src="props.videoList[currentPreviewIndex]"></video>
      <div class="next-btn" @click="onNextClick">
        <i class="iconfont icon-arrow-right"></i>
      </div>
    </div>
  </h-dialog>
</template>

<style scoped lang="scss">
  .vide-preview-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .pre-btn,
    .next-btn {
      width: 36px;
      height: 36px;
      background-color: rgba($color: #000000, $alpha: 0.2);
      border-radius: 36px;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        color: #fff;
        cursor: pointer;
      }

      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.4);
      }
    }
  }
</style>
